<template>
	<view class="user-space-head u-f-ajc">
		<image :src="getBgImg" mode="widthFix" lazy-load @tap.stop="changeImg"></image>
		<view class="user-space-head-info u-f-ajc u-f-column">
			<image :src="userinfo.userpic" mode="widthFix" lazy-load></image>
			<view class="user-space-margin u-f-ac">{{userinfo.username}}
				<tag-sex-age :sex="userinfo.sex" :age="userinfo.age"></tag-sex-age>
			</view>
			<view class="icon iconfont user-space-head-btn user-space-margin" :class="[isguanzhu?'active':'icon-zengjia']"
			 @tap.stop="guanzhu">
				{{isguanzhu?'已关注':'关注'}}
			</view>
		</view>
	</view>
	
</template>

<script>
	import tagSexAge from "../common/tag-sex-age.vue"
	export default {
		components:{
			tagSexAge
		},
		props:{
			userinfo:Object
		},
		data() {
			return {
				isguanzhu: this.userinfo.isguanzhu
			}
		},
		computed:{
			getBgImg() {
				return "../../static/bgimg/" + this.userinfo.bgimg + ".jpg";
			}
		},
		methods:{
			// 切换页面
			changeImg() {
				let no = parseInt(this.userinfo.bgimg);
				// 简写版
				this.userinfo.bgimg = no < 4 ? ++no : 1;
				// if (no < 4) {
				// 	no++;
				// } else {
				// 	no = 1;
				// }
			},
			// 关注事件
			guanzhu() {
				this.isguanzhu = !this.isguanzhu;
			}
		}
	}
</script>

<style scoped>

	.user-space-margin {
		margin: 15upx 0;
	}

	.user-space-head {
		position: relative;
		height: 500upx;
		overflow: hidden;
	}

	.user-space-head>image {
		width: 100%;
	}

	.user-space-head-info {
		position: absolute;
		top: 150upx;
	}

	.user-space-head-info>image {
		width: 150upx;
		height: 150upx;
		border-radius: 100%;
	}

	.user-space-head-info>view:first-of-type {
		color: #FFFFFF;
		font-size: 35upx;
		font-weight: bold;
		text-shadow: 2upx 2upx 10upx #333333;
	}

	.user-space-head-btn {
		background: #FFE933;
		color: #333333;
		border: 1upx solid #FFE933;
		padding: 0 10upx;
		border-radius: 10upx;
		font-size: 26upx
	}

	.active {
		background: none;
		color: #FFFFFF;
		border: 1upx solid #FFFFFF;
	}

</style>
